import React from "react"
import { Menu, Button, Layout, message } from 'antd';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import { UserManagement } from "../user/user-list";
import { NewsDetail } from "../news/publish-news";
import { AskPublish } from "../ask/publish-ask";
import { NewsManagement } from "../news/list-news";
import { Register } from "../user/register";
import { AddUser } from "../user/add-user";
import { Profile } from "../user/profile";
import { AskMangement } from "../ask/ask-mangement";

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

export class AdminPage extends React.Component {

    componentDidMount = () => {
       
        if (localStorage.getItem("user") == null) {
            message.info("Please login first.");
            setTimeout(() => {
                window.location.href = "/#/login";
            }, 500);
        } else {
          let user=JSON.parse(localStorage.getItem("user"));

          if(!user.admin){
            message.error("Only admin can visit this page.");
            setTimeout(() => {
                window.location.href = "/#/login";
            }, 500);
          }
        }
      }

    render = () => {

        return (
            // <Router>
            <div>
                <div style={{ width: "15vw", position: "fixed", top: "64px", height: "82vh" }}>

                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1', 'sub2', 'sub3']}
                        mode="inline"
                        style={{ height: "82vh" }}
                    >
                        <SubMenu key="sub1" icon={<MailOutlined />} title="Ask">
                            <Menu.Item key="1"><a href="/#/admin/ask/publish">Publish Ask</a></Menu.Item>
                            <Menu.Item key="2"><a href="/#/admin/ask-mangement">Ask Mangement</a></Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" icon={<ContainerOutlined />} title="User">
                            <Menu.Item key="3"><a href="/#/admin/user-management">User Mangement</a></Menu.Item>
                            <Menu.Item key="4"><a href="/#/admin/user-add">Add User</a></Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" icon={<DesktopOutlined />} title="News">
                            <Menu.Item key="5"><a href="/#/admin/news/publish">Publish News</a></Menu.Item>
                            <Menu.Item key="6"><a href="/#/admin/news-management"> News Mangement</a></Menu.Item>
                        </SubMenu>
                    </Menu>
                </div>

                <div style={{ marginLeft: "20vw", marginTop: "16px" }}>
                    <Route path={"/admin/user-management"} extra component={UserManagement} />
                    <Route path="/admin/user-add" extra component={AddUser} />
                    <Route path="/admin/user/:id" extra component={Profile} />
                    <Route path="/admin/news/:id" extra component={NewsDetail} />
                    <Route path="/admin/news-management" extra component={NewsManagement} />
                    <Route path="/admin/ask-mangement" extra component={AskMangement} />
                    <Route path="/admin/ask/:id" extra component={AskPublish} />
                </div>

            </div>
        )
    }

}